<template>
  <div class="about">
    <van-nav-bar title="商品列表" left-arrow @click-left="$router.back()" />
    <div class="count">
      <van-card v-for="(item,index) in list" :key="index"
        :thumb="item.goods_small_logo" @click="$router.push(`/detail?id=${item.goods_id}`)"
      >
        <template #tags>
          <p>{{item.goods_name}}</p>
          <span style="color:red">￥{{item.goods_price}}</span>
        </template>
      </van-card>
    </div>
  </div>
</template>
<script>
import { useRoute } from "vue-router";
import axios from "axios";
import { reactive, toRefs } from "vue";
export default {
  setup() {
    const route = useRoute();
    const data = reactive({
      list: [], // 商品的列表
    });
    let id = route.query.id;
    axios
      .get(`https://api-hmugo-web.itheima.net/api/public/v1/goods/search?cid=${id}`)
      .then((res) => {
        data.list = res.data.message.goods;
      });
    console.log(id);
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
   .count{
     height: calc(100vh - 50px);
     overflow: auto;
   }
</style>

